<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">供应商详情</small>
      </a>
      <a class="operation" v-on:click="show = !show" v-show="operation">
        <i class="el-icon-setting"></i> 操作
      </a>
      <a href="javascript:;" class="save" v-show="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
      <!--dialog-->
      <transition name="fade">
        <div class="operatbox" v-show="show">
          <a @click="update()">修改</a>
          <a @click="handleDelete()">删除</a>
        </div>
      </transition>
    </header>
  
    <main>
      <div class="formcontent">
        <ul>
          <li>
            <span><em></em>供应商名称</span>
            <div class="froms">
              <input v-model="listData.supplierName" :disabled="forbidden">
            </div>
          </li>
          <li>
            <span><em>*</em>经营地址</span>
            <div class="froms">
              <input v-model="listData.address" :disabled="forbidden" name="address" v-validate="'required'" :class="{'is-danger': errors.has('address')}">
            </div>
          </li>
          <li>
            <span><em>*</em>法定代表人(负责人)</span>
            <div class="froms">
              <input v-model="listData.leagalPerson" :disabled="forbidden" name="leagalPerson" v-validate="'required'" :class="{'is-danger': errors.has('leagalPerson')}">
            </div>
          </li>
          <li>
            <span><em></em>许可证件号码</span>
            <div class="froms">
              <input v-model="listData.code" :disabled="forbidden">
            </div>
          </li>
          <li>
            <span><em>*</em>营业执照号码</span>
            <div class="froms">
              <input v-model="listData.businessCode" :disabled="forbidden" name="businessCode" v-validate="'required'" :class="{'is-danger': errors.has('businessCode')}">
            </div>
          </li>
          <li>
            <span><em>*</em>联系人</span>
            <div class="froms">
              <input v-model="listData.contactPerson" :disabled="forbidden" name="contactPerson" v-validate="'required'" :class="{'is-danger': errors.has('contactPerson')}">
            </div>
          </li>
          <li>
            <span><em>*</em>联系方式</span>
            <div class="froms">
              <input v-model="listData.contactPhone" :disabled="forbidden" name="contactPhone" v-validate="'required|numeric'" :class="{'is-danger': errors.has('contactPhone')}">
            </div>
          </li>
          <li>
            <span><em>*</em>供应食品类别</span>
            <div class="froms">
              <input v-model="listData.commodityCategory" :disabled="forbidden" name="commodityCategory" v-validate="'required'" :class="{'is-danger': errors.has('commodityCategory')}">
            </div>
          </li>
          <li>
            <span><em>*</em>供应食品名称</span>
            <div class="froms">
              <input v-model="listData.foodName" :disabled="forbidden" name="foodName" v-validate="'required'" :class="{'is-danger': errors.has('foodName')}">
            </div>
          </li>
          <li>
            <span><em>*</em>供应食品品牌</span>
            <div class="froms">
              <input v-model="listData.foodBrand" :disabled="forbidden" name="foodBrand" v-validate="'required'" :class="{'is-danger': errors.has('foodBrand')}">
            </div>
          </li>
          <li>
            <span><em></em>登记时间</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="listData.regTime" @click="openPickerdDate()">
              </el-input>
              <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValue" @cancel="handleCanceDate" @confirm="handleConfirmDate"></mt-datetime-picker>
            </div>
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script>
  var moment = require('moment');
  import {
    CEKeepDelete
  } from '../../../api/api';
  import {
    CEKeepDetail,
    CEKeepUpdate
  } from '../../../api/api';
  import {
    DatetimePicker
  } from 'mint-ui';
  export default {
    components: {
      'mt-datetime-picker': DatetimePicker,
    },
    data() {
      return {
        listData: {},
        show: false, //默认隐藏
        operation: true,
        save: false,
        forbidden: true,
        pickerValue: moment().format('YYYY-MM-DD'),
        listData: {
          supplierName: '',
          address: '',
          leagalPerson: '',
          code: '',
          businessCode: '',
          contactPerson: '',
          commodityCategory: '',
          foodName: '',
          foodBrand: '',
          regTime: '',
          dataValue: '',
        }
      };
    },
    methods: {
      //获取日期
      openPickerdDate() {
        this.$refs.picker.open();
      },
      handleCanceDate() {
        let _this = this
        _this.pickerValue = _this.listData.regTime
      },
      // 确定按钮 --- 判断该时间是否可选，若可选则把值赋给输入框的dataValue
      handleConfirmDate(val) {
        let _this = this
        _this.listData.regTime = moment(val).format('YYYY-MM-DD')
      },
      //获取当前时间 
      datatime: function() {
        var moment = require('moment');
        var currentdate = moment().format('YYYY-MM-DD hh:mm:ss');
        return currentdate;
      },
      update: function() {
        this.operation = false,
          this.save = true,
          this.show = false,
          this.forbidden = false
      },
      //数据加载方法
      getData() {
        //定义需要传给通讯的参数： unid    
        let options = {
          params: {
            id: this.$route.query.unid,
          }
        }
        //调取接口
        CEKeepDetail(options).then((res) => {
          if (res.success === true) {
            this.listData = res.data;
          }
        })
      },
      //删除方法
      handleDelete() {
        let deletParams = {
          params: {
            ids: this.$route.query.unid,
          }
        }
        this.$confirm('是否删除此条信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          CEKeepDelete(deletParams).then(() => {
            this.getData();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.$router.go(-1);
          });
        });
      },
      //修改方法
      submitForm: function() {
        this.$validator.validateAll().then((result) => {
          if (result) {
            let data = {
              Unid: this.$route.query.unid,
              SupplierName: this.listData.supplierName,
              Address: this.listData.address,
              LeagalPerson: this.listData.leagalPerson,
              Code: this.listData.code,
              BusinessCode: this.listData.businessCode,
              ContactPerson: this.listData.contactPerson,
              ContactPhone: this.listData.contactPhone,
              CommodityCategory: this.listData.commodityCategory,
              FoodName: this.listData.foodName,
              FoodBrand: this.listData.foodBrand,
              RegTime: moment(this.listData.regTime).format('YYYY-MM-DD 00:00:00'),
            }
            let dataoption = {
              params: {
                Data: JSON.stringify(data),
                UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
              }
            }
            //调取接口
            CEKeepUpdate(dataoption).then((res) => {
              if (res.success === true) {
                this.$message.success('保存成功');
                this.$router.go(-1);
              } else {
                this.$message.error(res.msg);
              }
            }).catch(function() {
              this.$message.error('网络异常。');
            })
          } else {
            this.$message.error('带*号为必填项，请确认填写格式正确');
          }
        })
  
      }
    },
    created() {
      this.getData();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  //   em {
  //     width: 5px;
  //     display: -webkit-inline-box;
  //   }
  //   .formcontent span {
  //     font-size: 0.95rem;
  //     color: #333;
  //     -webkit-box-flex: 2;
  //     -ms-flex: 2;
  //     flex: 2;
  //     line-height: normal;
  //     text-align: right;
  //     margin-right: 1rem;
  // }
</style>
